<template>
	<view class="container">
		<!-- 顶部统计 -->
		<view class="stats-card">
			<view class="stat-item">
				<text class="stat-number">{{ communityCount }}</text>
				<text class="stat-label">小区数量</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ totalAmount }}</text>
				<text class="stat-label">总工程款</text>
			</view>
			<view class="stat-item">
				<text class="stat-number">{{ unpaidAmount }}</text>
				<text class="stat-label">未结清</text>
			</view>
		</view>

		<!-- 小区列表 -->
		<view class="communities-list">
			<view v-for="community in communities" :key="community.name" class="community-card" @click="viewCommunity(community)">
				<view class="community-header">
					<view class="community-info">
						<text class="community-name">{{ community.name }}</text>
						<text class="community-count">{{ community.projectCount }}个工程</text>
					</view>
					<view class="community-amount">
						<text class="amount-text">¥{{ community.totalAmount }}</text>
						<text class="unpaid-text">未结清: ¥{{ community.unpaidAmount }}</text>
					</view>
				</view>
				
				<view class="community-rooms">
					<text class="rooms-label">房间列表：</text>
					<view class="rooms-list">
						<text v-for="room in community.rooms.slice(0, 3)" :key="room" class="room-tag">{{ room }}</text>
						<text v-if="community.rooms.length > 3" class="room-more">+{{ community.rooms.length - 3 }}个</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="communities.length === 0" class="empty-state">
			<text class="empty-icon">🏘️</text>
			<text class="empty-text">暂无小区记录</text>
			<text class="empty-desc">添加工程款记录后会自动生成小区统计</text>
		</view>

		<!-- 悬浮按钮 -->
		<view class="fab" @click="addProject">
			<text class="fab-icon">+</text>
		</view>
	</view>
</template>

<script>
import { calculateUnpaidAmount } from '../../utils/calculations.js'

export default {
	data() {
		return {
			communities: []
		}
	},
	computed: {
		communityCount() {
			return this.communities.length
		},
		totalAmount() {
			return this.communities.reduce((sum, community) => sum + community.totalAmount, 0).toFixed(2)
		},
		unpaidAmount() {
			return this.communities.reduce((sum, community) => sum + community.unpaidAmount, 0).toFixed(2)
		}
	},
	onLoad() {
		this.loadCommunities()
	},
	onShow() {
		this.loadCommunities()
	},
	methods: {
		loadCommunities() {
			const projects = uni.getStorageSync('engineering_projects') || []
			
			// 按小区分组统计
			const communityMap = {}
			
			projects.forEach(project => {
				const communityName = project.community
				if (!communityMap[communityName]) {
					communityMap[communityName] = {
						name: communityName,
						projects: [],
						rooms: new Set(),
						totalAmount: 0,
						unpaidAmount: 0
					}
				}
				
				communityMap[communityName].projects.push(project)
				communityMap[communityName].rooms.add(project.room)
				communityMap[communityName].totalAmount += project.totalAmount
				
				// 使用统一的计算逻辑
				communityMap[communityName].unpaidAmount += calculateUnpaidAmount(project)
			})
			
			// 转换为数组并排序
			this.communities = Object.values(communityMap)
				.map(community => ({
					...community,
					rooms: Array.from(community.rooms),
					projectCount: community.projects.length
				}))
				.sort((a, b) => b.totalAmount - a.totalAmount)
		},
		viewCommunity(community) {
			uni.navigateTo({
				url: `/pages/community-detail/community-detail?name=${encodeURIComponent(community.name)}`
			})
		},
		addProject() {
			uni.navigateTo({
				url: '/pages/add/add'
			})
		}
	}
}
</script>

<style scoped>
.container {
	background: #f5f5f5;
	min-height: 100vh;
	padding: 20rpx;
}

.stats-card {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 20rpx;
	padding: 40rpx 30rpx;
	margin-bottom: 30rpx;
	display: flex;
	justify-content: space-around;
	box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.3);
}

.stat-item {
	text-align: center;
	color: white;
}

.stat-number {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
}

.stat-label {
	font-size: 24rpx;
	opacity: 0.9;
}

.communities-list {
	margin-bottom: 120rpx;
}

.community-card {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.community-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.community-info {
	flex: 1;
}

.community-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.community-count {
	font-size: 24rpx;
	color: #666;
}

.community-amount {
	text-align: right;
}

.amount-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #667eea;
	display: block;
	margin-bottom: 8rpx;
}

.unpaid-text {
	font-size: 24rpx;
	color: #ff9800;
}

.community-rooms {
	margin-top: 20rpx;
	padding-top: 20rpx;
	border-top: 1rpx solid #f0f0f0;
}

.rooms-label {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 16rpx;
	display: block;
}

.rooms-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12rpx;
}

.room-tag {
	padding: 8rpx 16rpx;
	background: rgba(102, 126, 234, 0.1);
	color: #667eea;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.room-more {
	padding: 8rpx 16rpx;
	background: #f0f0f0;
	color: #999;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.empty-state {
	text-align: center;
	padding: 100rpx 40rpx;
}

.empty-icon {
	font-size: 120rpx;
	display: block;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 32rpx;
	color: #999;
	display: block;
	margin-bottom: 16rpx;
}

.empty-desc {
	font-size: 26rpx;
	color: #ccc;
}

.fab {
	position: fixed;
	bottom: 40rpx;
	right: 40rpx;
	width: 120rpx;
	height: 120rpx;
	background: linear-gradient(135deg, #667eea, #764ba2);
	border-radius: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.4);
	z-index: 1000;
}

.fab-icon {
	color: white;
	font-size: 48rpx;
	font-weight: bold;
}
</style>
